// @unocss-include
.msg {
  --at-apply: "w-full flex gap-2 pl-2 pr-4rem py-3";
  transition: background-color 0.2s;

  // 头像
  .avatar {
    --at-apply: "h-2.4rem w-2.4rem flex-shrink-0 rounded-1/2 object-cover border-default";
  }
  .nickname {
    vertical-align: bottom;
  }
  .sendTime {
    transition: none;
  }
  &:hover {
    .sendTime {
      opacity: 0.6;
    }
  }
  .msg-popper {
    --at-apply: "w-fit max-w-20em md:max-w-30em p-2 px-3 leading-1.2em bg-color rounded-1.5";
    box-shadow:
      rgba(0, 0, 0, 0.1) 0px 1px 3px 0px,
      rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    border-radius: 4px 1rem 1rem 1rem;
  }
} 
.at-list {
  --at-apply: "max-w-20em md:max-w-30em";
}

.reply-shaing {
  --at-apply: "rounded-6px w-full bg-[var(--el-color-primary-light-7)] op-100 transition-120";
}

.body {
  --at-apply: "flex flex-col gap-2";
}
.flex-res {
  display: flex;
  gap: 0.5rem;
}
.self {
  
  ::selection  {
    background-color: #f0f0f0 !important;
    color: #010101 !important;
  }
  &.msg {
    --at-apply: "pr-2 pl-4rem py-3 ";
  }
  .body {
    align-items: end;
  }
  padding-left: 4em;
  margin-left: auto;
  .file,
  .flex-res {
    flex-direction: row-reverse;
  }
  .nickname {
    margin-left: auto;
    vertical-align: bottom;
  }
  .flex,
  .flex-ml-a {
    margin-left: auto;
    align-items: end;
  }
  flex-direction: row-reverse;
  .flex-row {
    margin-left: auto;
    flex-direction: row-reverse;
  }
  .msg-popper,
  .self-child {
    margin-left: auto;
    border-radius: 1rem 4px 1rem 1rem;
    --at-apply: "bg-[var(--el-color-primary)] dark:bg-[var(--el-color-primary)] text-white";
  }
  .flex-col {
    justify-content: right;
  }
}
